<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧效应侦察兵 - watch & watchEffect 示例</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #4CAF50;
            margin-bottom: 30px;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        h2 {
            color: #2196F3;
            border-bottom: 2px solid #2196F3;
            padding-bottom: 8px;
            margin-top: 0;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 8px 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        .info-box {
            background-color: #e3f2fd;
            padding: 15px;
            border-left: 4px solid #2196F3;
            margin: 15px 0;
        }
        .data-display {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin: 10px 0;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            font-family: 'Courier New', Courier, monospace;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>侧效应侦察兵 - watch & watchEffect</h1>
        
        <!-- watch 示例：定点监控摄像头 -->
        <div class="container">
            <h2>watch: 定点监控摄像头</h2>
            <div class="info-box">
                <p>精确监听指定数据源，可拿到新旧值。就像定点监控摄像头，专注于观察特定目标的变化。</p>
            </div>
            
            <div>
                <p>当前 ID: {{ id }}</p>
                <button @click="changeId">切换 ID</button>
                <div class="data-display" v-if="data">获取的数据: {{ JSON.stringify(data, null, 2) }}</div>
                <div v-else>加载中...</div>
            </div>
        </div>
        
        <!-- watchEffect 示例：AI 巡检无人机 -->
        <div class="container">
            <h2>watchEffect: AI 巡检无人机</h2>
            <div class="info-box">
                <p>立即运行一次，并收集依赖，适合"自动触发"场景。就像AI巡检无人机，飞一圈看到什么就记录什么。</p>
            </div>
            
            <div>
                <p>角色坐标: ({{ x }}, {{ y }})</p>
                <button @click="moveX">移动 X</button>
                <button @click="moveY">移动 Y</button>
                <div class="data-display">控制台将显示坐标变化记录</div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, watch, watchEffect } = Vue;
        
        const app = createApp({
            setup() {
                // watch 示例
                const id = ref(1);
                const data = ref(null);
                
                // 监听 id 变化，拉取新数据
                watch(id, async (newId, oldId) => {
                    console.log(`ID 从 ${oldId} → ${newId}`);
                    try {
                        const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${newId}`);
                        data.value = await res.json();
                    } catch (error) {
                        console.error('获取数据失败:', error);
                        data.value = { error: '获取数据失败' };
                    }
                }, { immediate: true });
                
                const changeId = () => {
                    id.value = id.value === 1 ? 2 : 1;
                };
                
                // watchEffect 示例
                const x = ref(0);
                const y = ref(0);
                
                // 只要 x 或 y 变，就打印最新坐标
                watchEffect(() => {
                    console.log(`角色坐标：(${x.value}, ${y.value})`);
                });
                
                const moveX = () => {
                    x.value += 1;
                };
                
                const moveY = () => {
                    y.value += 1;
                };
                
                return {
                    id,
                    data,
                    changeId,
                    x,
                    y,
                    moveX,
                    moveY
                };
            }
        });
        
        app.mount('#app');
    </script>
</body>
</html>